@extends('home.inc.common')
@section('title')
    <meta charset="utf-8">
    <link rel="icon" href="http://www.qiyiguo.tv/home_new/favicon.ico" />
    <title>直播 - 奇异果聚合</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="{{ asset('home_new/css/libs.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('home_new/css/global.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('home_new/css/page2.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('home_new/css/page.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('home_new/css/qyg2016.css') }}" rel="stylesheet" type="text/css" />
    <link rel="icon" href="/favicon.ico" />
    <link href="{{ asset('home_new/css/add_to_more/add_to_more.css') }}" type="text/css" rel="stylesheet" />
    <link href="{{ asset('home_new/css/add_to_more/jquery-ui.css') }}" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="{{ asset('js/add_to_more/jquery-3.1.1.min.js') }}"></script>
    <style>
        .index_title .index_titleMain a.plusRecom_title,
        .index_title .index_titleMain a.plusArt_title {
            color: #333;
        }
    </style>

@endsection
@section('content')
    <div class="wrap">
        <div id="main">
            @if ($cates)
                @include('home.anchor.common-cates', ['cates' => $cates->map(function ($c) { return $c['cate'];})])
                <div class="media_ubzbtitlebox">
                    <div class="media_content media_newcontent">
                        <div class="media_ubzbtitle">
                            <ul>
                                <span>为你推荐：</span>
                                @foreach($top as $anchor)
                                    <li>
                                        <a href="{{ route('anchor.show', [$anchor->id]) }}" title="{{ $anchor->room_name }}" target="_blank">
                                            <span class="ubpic_box"><img src="{{ $anchor->avatar }}"></span>
                                            {{ $anchor->name }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="medi_banner_box">
                            <ul>
                                @foreach($rec_top->take(5) as $anchor)
                                    <li @if($loop->index === 0) class="first_big" @endif>
                                        <a href="{{ route('anchor.show', [$anchor->id]) }}" title="{{ $anchor->room_name }}">
                                            <span><img src="{{ $anchor->cover }}"></span>
                                            <div class="medi_video_title_box">
                                                <div class="medi_video_title">
                                                    <h2>{{ $anchor->room_name }}</h2>
                                                    <p>
                                                        <span>{{ $anchor->name }}</span>
                                                        <span>{{ $anchor->live->name }}</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                    </div>
                </div>
                <!--栏目-->
                @foreach($cates as $cate)
                    <div @if(($loop->index + 1) % 4 == 0) class="medi_video_box bg_box_blue"
                         @elseif(($loop->index + 1) % 2 == 0) class="medi_video_box bg_box"
                         @else class="medi_video_box"
                            @endif
                    >
                        <div class="medi_video_zb">
                            <ul>
                                <li class="medi_video_zt">
                                    <div class="zt_logo">
				      	  		<span>
				      	  			<img src="{{ $cate['cate']->cate_logo }}">
				      	  		</span>
                                        <div class="zt_num">
                                            {{ $cate['cate']->count }}
                                        </div>
                                        <h2>{{ $cate['cate']->cate_name }}</h2>
                                    </div>
                                    <a href="{{ route('anchor.cate', [$cate['cate']->cate_id]) }}" target="_blank">
                                        <h2>
                                            更多直播 >>
                                        </h2>
                                    </a>
                                    <p>
                                        @foreach($cate['items']->take(-4) as $anchor)
                                            <a href="{{ route('anchor.show', [$anchor->id]) }}" target="_blank"><span>{{ $anchor->name }}</span></a>
                                        @endforeach
                                    </p>
                                </li>
                                @foreach($cate['items']->take(7) as $anchor)
                                    <li>
                                        <a href="{{ route('anchor.show', [$anchor->id]) }}" title="{{ $anchor->room_name }}" target="_blank">
                                            <div class="medi_video_hover">
                                                <span><img src="{{ $anchor->cover }}"></span>
                                                <div class="medi_video_play">
                                                    <img src="{{ asset('home_new/images/zb/play_medi.png') }}">
                                                </div>
                                                {{--<div class="add_to_more"><span>+</span></div>--}}
                                            </div>
                                            <div class="medi_video_us">
                                                <h2>{{ $anchor->room_name }}</h2>
                                                <p>
                                                    <span>{{ $anchor->name }}</span>
                                                    <span><em></em>{{ num2word($anchor->online) }}</span>
                                                </p>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endforeach
        </div>
        @else
            <p>获取缓存失败！</p>
        @endif
        <div id="ui-resizable" class="multi-screen ui-draggable ui-draggable-handle ui-widget-content" style="width: 600px; display: none; height: auto;left: 50%;bottom: 50%">
            <div class="multi-screen-hd">
                <i class="icon-multi-screen-hd"></i>一屏多看
                <a class="multi-screen-close" href="javascript:;">×</a>
            </div>
            <div class="multi-screen-list clearfix" style="display: block;">


            </div>
            <div class="multi-screen-error-msg multi-screen-friendly-notice" style="display: none;">
                <p>不能在添加了</p>
                <a href="javascript:;" class="friendly-notice-btn-ok">朕知道啦</a>
            </div>
            <div class="multi-screen-friendly-notice friendly-notice" style="display: none;"><p>为了观看流畅</p>
                <p>可根据自己的网络情况进行房间添加哦！</p>
                <a href="javascript:;" class="friendly-notice-btn-ok">朕知道啦</a>
            </div>

        </div>
        <div class="multi-screen-little-btn">一屏多播</div>
        <script type="text/javascript" src="{{ asset('js/add_to_more/jquery-ui.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/add_to_more/add_to_more.js') }}"></script>
    </div>
@endsection
